<template>
    <div>
      <!-- 
      填写中：WRITING，审核中：SUBMITTED，审核通过：PAST，审核不通过：REJECTED，已发布：PUBLISHED） 
      可用值:WRITING,SUBMITTED,PAST,REJECTED,PUBLISHED
      -->
        <span v-show="status == 'WRITING'" class="pub-list-draft">填写中</span>
        <span v-show="status == 'SUBMITTED'" class="pub-list-audit">审核中</span>
        <span v-show="status == 'PAST'" class="pub-list-pass">审批通过</span>
        <span v-show="status == 'REJECTED'" class="pub-list-rejected">审批不通过</span>
        <span v-show="status == 'PUBLISHED'" class="pub-list-pass">已发布</span>
    </div>
</template>
<script>
export default {
    props: {
        status: {
            type: String,
        }
    },
}
</script>
<style>
.pub-list-draft::before,
.pub-list-audit::before,
.pub-list-pass::before,
.pub-list-rejected::before,
.pub-list-del::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
}
.pub-list-audit::before {
    background-color: rgb(16, 141, 233);
}
.pub-list-pass::before {
    background-color: rgb(0, 168, 84);
}
.pub-list-rejected::before {
    background-color: rgb(254, 85, 0);
}
.pub-list-draft::before {
    background-color: rgb(255, 255, 0);
}
.pub-list-del::before {
    background-color: rgb(173, 173, 173);
}
</style>